<template>
  <view class="container">
    <view class="top"></view>
    <view class="content">
      <view class="title">欢迎来到xxx</view>
      <input
        class="u-border-bottom"
        type="number"
        v-model="tel"
        placeholder="请输入手机号"
      />
      <view class="tips">未注册的手机号验证后自动账号</view>
      <button @tap="submit" :style="[inputStyle]" class="getCaptcha">
        获取短信验证码
      </button>
    </view>
    <view class="buttom">
      <view class="loginType">
        <view class="wechat item">
          <view class="icon">
            <u-icon
              size="70"
              name="weixin-fill"
              color="rgb(83,194,64)"
            ></u-icon>
          </view>
          微信登录
        </view>
      </view>
      <view class="hint">
        登录代表同意
        <text class="link">用户协议、隐私政策，</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tel: ""
    };
  },
  computed: {
    inputStyle() {
      let style = {};
      if (this.tel) {
        style.color = "#fff";
        style.backgroundColor = this.$u.color["primary"];
      }
      return style;
    }
  },
  methods: {
    submit() {
      if (this.$u.test.mobile(this.tel)) {
        this.$u.route({
          url: "pages/login/code"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  font-size: 28rpx;

  .content {
    padding-top: 100rpx;
    width: 600rpx;
    margin: 0 auto;

    .title {
      text-align: left;
      font-size: 60rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }

    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 6rpx;
    }

    .tips {
      color: $u-type-info;
      margin-bottom: 40rpx;
      margin-top: 8rpx;
    }

    .getCaptcha {
      background-color: $u-type-info-disabled;
      color: $u-tips-color;
      border: none;
      font-size: 30rpx;
      padding: 12rpx 0;

      &::after {
        border: none;
      }
    }

    .alternative {
      color: $u-tips-color;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .buttom {
    .loginType {
      display: flex;
      padding: 150rpx;
      justify-content: center;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $u-content-color;
        font-size: 28rpx;
      }
    }

    .hint {
      padding: 40rpx;
      font-size: 24rpx;
      color: $u-tips-color;
      .link {
        color: $u-type-warning;
      }
    }
  }
}
</style>
